<template>
	<Suspense>
		<template v-slot>
			<SVGLoader class='svg_icon' v-bind='props'/>
		</template>
		<template v-slot:fallback>
			<i class='vxe-icon-spinner roll'/>
		</template>
	</Suspense>
</template>
<script lang='ts' setup>
import { computed, defineAsyncComponent, watch } from 'vue';
import { SvgIcons } from '@/config/icon/SvgIcons.ts';
const props = defineProps({
	iconType  : {
		type     : String,
		required : true
	},
	iconClass : {
		type     : String,
		required : true
	},
	width     : {
		type    : String,
		require : false,
		default : 'auto'
	},
	height    : {
		type    : String,
		require : false,
		default : '1em'
	},
	fontSize  : {
		type    : String,
		require : false,
		default : 'inherit'
	}
});
let SvgName = computed(() => props['iconClass']);
let SvgTypeName = computed(() => props['iconType']);
let SVGLoader: any;
/*因为动态加载SVG有闪烁问题*/
/*于是使用Suspense组件来解决图标切换时,大小瞬间坍缩又突然恢复(闪烁)的问题*/
/*闪烁问题来自单击按钮后从服务器下载资源以及切换的瞬间内容消失*/
const getSvgCom = () => {
	if (SvgIcons[`/src/components/customComponents/icon/svg/${SvgTypeName.value}/${SvgName.value}.vue`]) {
		// 如果存在直接跳到该页面
		return defineAsyncComponent(
			SvgIcons[`/src/components/customComponents/icon/svg/${SvgTypeName.value}/${SvgName.value}.vue`]);
	} else {
		// 如果不存在则显示警告图标
		// @ts-ignore
		return defineAsyncComponent(
			() => import(`/src/components/customComponents/icon/svg/iconfont5/iconfont5-Warning.vue`));
	}
};
watch(SvgName, (newValue, oldValue) => {
	SVGLoader = getSvgCom();
}, {
	deep      : false,
	immediate : true
});
</script>
<style lang='scss' scoped>
.svg_icon{
	vertical-align :-0.15em;
	fill           :currentColor;
	overflow       :hidden;
}
</style>